import { getPreviewUrl } from "@utils/WeStudyUtil";
import { Button, Card, Image } from "antd";
import { FC } from "react";

const TrainProblemKnowledge: FC<any> = ({ trainItem, refreshTrain}) => {

  var knowledge = trainItem;
  var explainImg = getPreviewUrl() + knowledge.explainImg;
  var problemImg = getPreviewUrl() + knowledge.problemImg;

  // 3. 提交处理
  const handleSubmit = () => {
    refreshTrain("knowledge");
  };
  
  return (
    <div>
      <Card
              title="解析"
              hoverable
              cover={
                <Image.PreviewGroup
                  items={problemImg === explainImg ? [explainImg] : [explainImg, problemImg]}
                >
                  <Image width={648} height={360} style={{ objectFit: "contain" }} src={explainImg}/>
                </Image.PreviewGroup>
              }
            ></Card>
      <Button
        type="primary"
        onClick={handleSubmit}
        size="large"
        style={{
          marginLeft: "20%",
          width: "60%",
          height: 50,
          background: "#52c41a",
          borderRadius: 8,
          fontSize: 16,
          marginTop: 30,
        }}
      >
        嗯我懂了
      </Button>
    </div>
  );
};

export default TrainProblemKnowledge;
